<template>
  <div>
    <h2>TsInfo</h2>
    <p
      @input="$emit('update:username', usernameModifiers.upcase ? $event.target.value.toUpperCase() : $event.target.value)">
      username <input type="text" :value="username">
    </p>

    <p @input="$emit('update:gender', $event.target.value)">
      gender
      <input type="radio" value="1" :checked="gender === 1" name="gedner"> 男
      <input type="radio" value="2" :checked="gender === 2" name="gedner"> 女
    </p>

    <p @input="changeHobbys" id="hobbys">
      hobby
      <input type="checkbox" value="css" :checked="hobbys.includes('css')" name="hobby"> CSS
      <input type="checkbox" value="html" :checked="hobbys.includes('html')" name="hobby"> HTML
      <input type="checkbox" value="js" :checked="hobbys.includes('js')" name="hobby"> JS
    </p>

    <p>
      <select @input="$emit('update:city', $event.target.value)">
        <option value="nj" :selected="city === 'nj'">南京</option>
        <option value="sh" :selected="city === 'sh'">上海</option>
        <option value="wx" :selected="city === 'wx'">无锡</option>
        <option value="sz" :selected="city === 'sz'">苏州</option>
      </select>
      usernameModifiers:{{ usernameModifiers }}
      <hr>
      genderModifiers:{{ genderModifiers }}
    </p>
  </div>
</template>
<script setup>
defineProps(['username', 'gender', 'hobbys', 'city', 'usernameModifiers', 'genderModifiers']);
const emit = defineEmits(['update:username', 'update:gender', 'update:hobbys', 'update:city']);

function changeHobbys(e) {
  const hobbys = [...document.querySelectorAll('#hobbys input:checked')].map(el => el.value);
  emit('update:hobbys', hobbys);
}
</script>